import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import axios from './api/axios'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/common.css'
import './assets/font/iconfont.css'
import has from './uitils/has'
Vue.config.productionTip = false
Vue.use(ElementUI)
// 解决重复点击路由报错
Vue.prototype.$has = has
// 发送请求的基础地址
// 给vue实例上面绑定请求的方法
Vuex.Store.prototype.$http = axios
Vue.prototype.$http = axios

// 全局自定义指令 鉴权 按钮
Vue.directive('haspermission', {
  bind (el, binding, VNode) {
    const buttons = window.sessionStorage.getItem('permissionButtons')
    if (!has(buttons, binding.value)) {
      const className = el.className
      el.className = className + ' ' + 'is-disabled'
      el.disabled = true
    }
  }
})
// 路由前置钩子(路由了守卫)
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = localStorage.getItem('token')
    if (token) {
      const { sideMenu } = store.state
      if (store.state.sideMenu && store.state.sideMenu.length > 0) {
        next()
      } else {
        store.dispatch('FETCH_MENULIST').then(() => {
          next({ path: to.path })
        })
      }
    } else {
      next({ path: '/login' })
    }
  }
}),
// 全局路由后置钩子
router.afterEach((to, from) => {
  store.commit('SET_CRUMB', to.matched)
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
